<template>
  <div class="page-container">
    <div class="car-purchase-box">
      <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />

      <table-index :table="table" @loadData="loadData">
        <template #licenseNo="{ record }">
          <div>{{ record.carLicenseNo }}</div>
          <div>{{ record.CarModelName }}</div>
        </template>

        <template #contractSignDate="{ record }">
          {{ record.startTime }}
          <div>-</div>
          {{ record.endTime }}
        </template>

        <template #otherFeeTotalTmp="{ record }">
          <div class="content-item pickup">
            <div class="flex items-start content-item-name">
              <tag type="warn">付</tag>
              <div class="flex-1">{{ record.otherFeeTotalAmount }}</div>
            </div>
          </div>
          <div class="content-item return">
            <div class="flex items-start content-item-name">
              <tag type="success">收</tag>
              <div class="flex-1">{{ record.otherFeeTotalAmountHarvest }}</div>
            </div>
          </div>
        </template>

        <template #otherFeePayableTmp="{ record }">
          <div class="content-item pickup">
            <div class="flex items-start content-item-name">
              <tag type="warn">付</tag>
              <div class="flex-1">{{ record.otherFeePayableAmount }}</div>
            </div>
          </div>
          <div class="content-item return">
            <div class="flex items-start content-item-name">
              <tag type="success">收</tag>
              <div class="flex-1">{{ record.otherFeePayableAmountHarvest }}</div>
            </div>
          </div>
        </template>
      </table-index>
    </div>
  </div>
</template>

<script setup lang="ts" name="CarPurchaseBillList">
  import { reactive, onMounted, ref, computed } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { purchaseFeeList, exportPurchaseFee } from '@/api/asset/car'
  import useNavigate from '@/hooks/useNavigate'
  import { getSupplierList } from '@/api/asset/maintenance'
  import { useExport } from '@/hooks/list'

  const { navigateTo } = useNavigate()

  const searchList = computed(() => {
    return [
      {
        label: '车牌号',
        prop: 'licenseNo',
        type: 'a-input',
      },
      { label: '归属门店', prop: 'siteIdList', type: 'remote-select', attrs: { multiple: true, type: 'multiple_site_listBystaff' } },
      { label: '业务单信息', prop: 'businesCode', type: 'a-input' },
      {
        label: '供应商信息',
        prop: 'supplierIdList',
        type: 'a-select',
        options: supplierLists.value,
        multiple: true,
      },
      {
        label: '合同周期',
        prop: 'dateRange',
        type: 'i-range-picker',
        timePickerProps: {
          defaultValue: ['00:00:00', '23:59:59'],
        },
        change: (value: string[]) => {
          if (value) {
            queryParam.contractSignDate = value[0]
            queryParam.contractEndDate = value[1]
          }
        },
      },
    ]
  })

  const table = useTable({
    columns: [
      { title: '车辆信息', dataIndex: 'carLicenseNo', slotName: 'licenseNo' },
      { title: '业务单信息', dataIndex: 'businesCode', width: 170 },
      { title: '汽车销售', dataIndex: 'supplierName' },
      { title: '归属门店', dataIndex: 'siteName' },
      { title: '合同周期', dataIndex: 'contractSignTime', slotName: 'contractSignDate', width: 180 },
      { title: '购置金额', dataIndex: 'contractAmount', unit: '元' },
      { title: '购置待结金额', dataIndex: 'payableAmount', unit: '元' },
      { title: '其他费用', dataIndex: 'otherFeeTotalTmp', slotName: 'otherFeeTotalTmp', unit: '元' },
      { title: '其他费用待结金额', dataIndex: 'otherFeePayableTmp', slotName: 'otherFeePayableTmp', unit: '元', width: 180 },
    ],
    operates: [
      {
        label: '详情',
        permission: 'svms:finance:bill:car-purchase.detail',
        // show: (record) => record.recordStatus == 10 && record.canOperate == 1,
        method: (record: any) => {
          navigateTo(`/car-purchase/detail/${record.businesCode}?carId=${record.carId}`, `${record.businesCode}-账单详情`)
        },
      },
    ],
    buttons: [
      {
        mode: 'export',
        label: '导出',
        permission: 'svms:finance:bill:car-purchase.export',
        method: () => handleExport(),
      },
    ],
  })

  const handleExport = () => {
    useExport(exportPurchaseFee, queryParam)
  }

  const supplierLists = ref([])
  const supplierList = () => {
    getSupplierList({ supplierType: 3, status: 1 }).then((res: any) => {
      res.result.forEach((item: any) => {
        item.label = item.supplierName
        item.value = item.id
      })
      supplierLists.value = res.result
    })
  }

  const queryParam = reactive<any>({
    dateRange: [],
  })
  const loadData = useFetchTableDataApi(table, queryParam, purchaseFeeList)

  onMounted(() => {
    loadData()
    supplierList()
  })
</script>

<style lang="less" scoped>
  .content-item {
    .content-item-name {
      margin-bottom: 4px;
      .staff-can-click {
        color: rgb(var(--primary-6));
        cursor: pointer;
      }
      .tag-pickup {
        padding: 0 3px;
        line-height: 18px;
      }
      :deep(.custom-tag) {
        margin-right: 6px;
        position: relative;
        top: 1px;
      }
    }
    .content-item-tag :deep(.custom-tag.default) {
      line-height: 20px;
      padding: 4px 8px;
    }
  }
  .content-item + .content-item {
    margin-top: 10px;
  }
</style>
